<template>
  <div class="demo">
    <div class="demo-title">自定义 tag 内容</div>
    <div class="demo-content">
      <Cascader
        v-model:value="value"
        multiple
        :options="options"
        placeholder="Please select"
        suffix-icon="Shopping Around"
      >
        <template #tagRender="data">
          <Tag :key="data.value" color="blue">{{ data.label }}</Tag>
        </template>
      </Cascader>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Tag from '@sscd/tag';
  import Cascader from '@sscd/cascader';
  import type { CascaderProps } from '@sscd/cascader';
  const value = ref<string[]>([]);
  const options: CascaderProps['options'] = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'freezeKey',
          label: 'freeze',
          children: [
            { value: 'key1', label: 'salmon' },
            { value: 'key2', label: 'beef' },
          ],
        },
        {
          value: 'fruitsKey',
          label: 'fruits',
          children: [
            { value: 'key11', label: 'apple' },
            { value: 'key22', label: 'banana' },
          ],
        },
      ],
    },
    {
      value: 'Chinese delicious food',
      label: '中国美食',
      children: [
        {
          value: 'key3',
          label: '月饼',
          children: [
            { value: 'key4', label: '蛋黄馅' },
            { value: 'key5', label: '五仁馅' },
          ],
        },
      ],
    },
  ];
</script>
